<template>
	<view class="body">
		<xk-header title="报事报修"></xk-header>
		<view class="list">
			<view class="list-item header">
				<view>
					<view class="header-icon"></view>报修信息
				</view>
			</view>
			<view>
				<view class="list-item">
					<view>联系电话<text class="com-req"></text>：</view>
					<input v-model="formData.contact_phone" class="input-item" placeholder="请输入联系电话"
						placeholder-class="placeholder" />
				</view>
				<view @click="editBuild" class="list-item">
					<view>空间区域<text class="com-req"></text>：</view>
					<view v-if="formData.repair_Address" class="right-title1" style="color: #2C72FF;">
						{{ formData.repair_Address }}</view>
					<view v-else class="right-title1" style="color: #2C72FF;">添加空间区域</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
				</view>
				<!-- <biaofun-datetime-picker :defaultValue="defaultDate"
					start="2000-02-03 00:00"
					end="2200-10-28 23:59"
					fields="hour"
					@change="dateChange"
				>
					<view class="list-item">
						<view>预约时间<text class="com-req"></text>：</view>
						<view :class="formData.appointment_time ? 'right-title1' : 'right-title1 right-title1-empty'">{{formData.appointment_time ? formData.appointment_time : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</biaofun-datetime-picker> -->
				<view class="list-item">
					<view>预约时间<text class="com-req"></text>：</view>
					<view :class="formData.appointment_time != '' ? 'right-title1' : 'right-title1 right-title1-empty'"
						@click="showDate">
						{{ formData.appointment_time ? formData.appointment_time : "请选择" }}</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
				</view>
				<view>
					<u-datetime-picker :show="show" v-model="defaultDate" mode="datetime" :closeOnClickOverlay="true"
						@close="show = false" @confirm="confirmdate" @cancel='show = false'
						@change="dateChange"></u-datetime-picker>
				</view>
				<view class="list-item textarea">
					<view>反馈问题<text class="com-req"></text>：</view>
					<textarea v-model="formData.repair_content" placeholder="请在此填写您需要反馈的问题，我们将尽快为您提供服务~"
						placeholder-class="placeholder" />
				</view>

			</view>
		</view>

		<view class="from-item upload-img-item" style="margin-top: 20rpx;">
			<view class="title">上传照片</view>
			<!-- <uploadImg @addSuccess='addImgSuccess' @deletSuccess = 'deletImgSuccess'></uploadImg> -->
			<upload-image :images="formData.repair_image" @onChange="(images) => { formData.repair_image = images }" />
		</view>
		<view class="from-item">
			<view class="title">备注</view>
			<textarea v-model="formData.apply_remark" type="text" placeholder="在此输入备注" placeholder-class="placeholder" />
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="submitInfo">提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
import moment from 'moment'
import uploadImg from '@/components/upload-image/upload-image.vue'
export default {
	components:{
		uploadImg
	},
	data() {
		return {
			defaultDate: moment().format('YYYY-MM-DD HH:mm'),
			formData: {
				property_id: '',
				repair_Address: '',
				contact_user: this.$util.getStorage("loginInfo").name,
				contact_phone: '',
				appointment_time: '',
				repair_content: '',
				repair_image: '',
				apply_remark: '',
			},
			show: false,
		};
	},
	methods: {
		addImgSuccess(addResult){
			this.formData.repair_image = addResult
			// console.log('addResult',addResult)
		},
		deletImgSuccess(deletResult){
			this.formData.repair_image = deletResult
		},
		showDate() {
			this.show = true;
		},
		confirmdate(e) {
			this.show = false
			this.formData.appointment_time = moment(e.value).format('YYYY-MM-DD HH:mm')
		},
		dateChange(e) {
			this.formData.appointment_time = moment(e.value).format('YYYY-MM-DD HH:mm')
		},
		submitInfo() {
			if (!this.formData.contact_phone) {
				this.$util.toast('请输入联系方式')
				return
			}
			if (!this.formData.property_id) {
				this.$util.toast('请选择空间区域')
				return
			}
			if (!this.formData.appointment_time) {
				this.$util.toast('请输入预约时间')
				return
			}
			if (!this.formData.repair_content) {
				this.$util.toast('请输入反馈问题')
				return
			}
			this.$util.confirm({
				content: "确认要提交报事报修信息？",
				confirmText: "提交"
			}).then(isConfirm => {
				if (isConfirm) {

					this.$util.post({
						url: "app/pmServiceRepair/apply",
						data: this.formData
					}).then((res) => {
						uni.$emit('refreshHomeDataList')
						uni.$emit('refreshServiceRepair')
						uni.redirectTo({
							url: '/pagesA/facility-repair/facility-repair-finish?type=create'
						})
					});
				}
			})
		},
		editBuild() {
			uni.$off('getBuildInfo')
			uni.$on('getBuildInfo', (res) => {
				console.log('222=2===', res)
				this.formData.property_id = res.property_id;
				this.formData.repair_Address = res.building + "栋" + res.storey + "层"

			});
			uni.navigateTo({
				url: '/pagesA/facility-repair/common-building-list'
			})
		},
	}
}
</script>

<style lang="scss" scoped>
@import '@/common/from.scss';
</style>
